<template>
	<div style="padding-bottom: 100px;">
		<!--货值声明-->
		<view style="background-color: #ffffff;margin: 10px;border-radius: 12px;padding: 15px;height: 35px;">
			<uni-forms :modelValue="formData" labelWidth="75px">
				<view style="display: flex;">
					<view style="flex: 1;">
						<uni-forms-item label="货值声明">
							<uni-easyinput type="text" v-model="formData.parcelInsuranceDesc" placeholder="货值声明" />
						</uni-forms-item>
					</view>
					<view style="flex: 1;">
						<uni-forms-item label="保价费" labelAlign="right" labelWidth="60px">
							<view style="display: flex;align-items: center;">
								<uni-easyinput type="number" v-model="formData.parcelInsuranceFee" placeholder="保价费" />
								<uni-icons type="help" size="20" color="#999" style="margin-left: 5px;"></uni-icons>
							</view>
						</uni-forms-item>
					</view>
				</view>
			</uni-forms>
			
		</view>
		<!--代收贷款-->
		<view style="background-color: #ffffff;margin: 10px;border-radius: 12px;padding: 15px;">
			<uni-forms ref="form" :modelValue="formData" labelWidth="75px">
				<view style="display: flex;margin-bottom: 10px;">
					<view style="flex: 1;margin-right: 5px;">
						<checkbox-group style="padding-top: 8px;" @change="setAgentBusinessFee">
							<label>
								<checkbox :value="false" :checked="agentBusinessFeeFlag" />代收贷款
							</label>
						</checkbox-group>
					</view>
				</view>
				<uni-forms-item label="代收账号" style="width: 90%;" name="receiptType">
					<uni-data-select :disabled="!agentBusinessFeeFlag" v-model="formData.agentBusinessAccountType" :localdata="agentBusinessAccountType" placeholder="选择账号类型"
						tyle="background-color: white;" />
					<view style="margin-top: 20px;">
						<uni-easyinput type="text" :disabled="!agentBusinessFeeFlag" v-model="formData.agentBusinessAccountName" placeholder="输入户名" />
					</view>
					<view style="margin-top: 20px;">
						<uni-easyinput type="text" :disabled="!agentBusinessFeeFlag" v-model="formData.agentBusinessAccount" placeholder="输入账号" />
					</view>
				</uni-forms-item>
				<view style="display: flex;">
					<view style="flex: 1;">
						<uni-forms-item label="代收金额">
							<uni-easyinput type="text" :disabled="!agentBusinessFeeFlag" v-model="formData.agentBusinessFee" placeholder="输入代收金额" />
						</uni-forms-item>
					</view>
					<view style="flex: 1;">
						<uni-forms-item label="服务费" labelAlign="right">
							<uni-easyinput type="text" :disabled="!agentBusinessFeeFlag" v-model="formData.agentBusinessServiceFee" placeholder="输入服务费" />
						</uni-forms-item>
					</view>
				</view>
			</uni-forms>
		</view>
		<!--回单服务-->
		<view style="background-color: #ffffff;margin: 10px;border-radius: 12px;padding: 15px;">
			<uni-forms ref="form" :modelValue="formData"  :rules="rules" labelWidth="75px">
				<view style="display: flex;margin-bottom: 10px;">
					<view style="flex: 1;margin-right: 5px;">
						<checkbox-group style="padding-top: 8px;" @change="setReceiptFee">
							<label>
								<checkbox :value="false" :checked="receiptFeeFlag" />回单服务
							</label>
						</checkbox-group>
					</view>
				</view>
				<uni-forms-item label="回单类型">
					<view style="margin-top: 5px;">
						<uni-data-checkbox multiple :disabled="!receiptFeeFlag" v-model="receiptTypeArr" :localdata="receiptType"></uni-data-checkbox>
					</view>
				</uni-forms-item>
				<uni-forms-item label="数量">
					<uni-easyinput type="text" :disabled="!receiptFeeFlag" v-model="formData.receiptNum" placeholder="输入1~99数字" />
				</uni-forms-item>
				<uni-forms-item label="回单费">
					<uni-easyinput type="text" :disabled="!receiptFeeFlag" v-model="formData.receiptFee" placeholder="输入回单费" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<!--其它服务-->
		<view style="background-color: #ffffff;margin: 10px;border-radius: 12px;padding: 15px;">
			<uni-forms ref="form" :modelValue="formData"  :rules="rules" labelWidth="75px">
				<view style="display: flex;">
					<view style="margin-right: 30px;">
						<checkbox-group style="padding-top: 8px;" @change="setWarehouseFee">
							<label>
								<checkbox :value="false" :checked="warehouseFeeFlag" />仓储服务
							</label>
						</checkbox-group>
					</view>
					<view style="flex: 1;margin-right: 5px;">
						<uni-forms-item label="仓储费" style="width: 90%;" name="warehouseFee">
							<uni-easyinput type="text" :disabled="!warehouseFeeFlag" v-model="formData.warehouseFee" placeholder="输入仓储费" />
						</uni-forms-item>
					</view>
				</view>
				<view style="display: flex;">
					<view style="margin-right: 30px;">
						<checkbox-group style="padding-top: 8px;" @change="setLoadingFee">
							<label>
								<checkbox :value="false" :checked="loadingFeeFlag" />装货服务
							</label>
						</checkbox-group>
					</view>
					<view style="flex: 1;margin-right: 5px;">
						<uni-forms-item label="装货费" style="width: 90%;" name="loadingFee">
							<uni-easyinput type="text" :disabled="!loadingFeeFlag" v-model="formData.loadingFee" placeholder="输入装货费" />
						</uni-forms-item>
					</view>
				</view>
				<view style="display: flex;">
					<view style="margin-right: 30px;">
						<checkbox-group style="padding-top: 8px;" @change="setUnloadFee">
							<label>
								<checkbox :value="false" :checked="unloadFeeFlag" />卸货服务
							</label>
						</checkbox-group>
					</view>
					<view style="flex: 1;margin-right: 5px;">
						<uni-forms-item label="卸货费" style="width: 90%;" name="unloadFee">
							<uni-easyinput type="text" :disabled="!unloadFeeFlag" v-model="formData.unloadFee" placeholder="输入卸货费" />
						</uni-forms-item>
					</view>
				</view>
				<!-- <view style="display: flex;">
					<view style="margin-right: 30px;">
						<checkbox-group style="padding-top: 8px;" @change="checkboxChange">
							<label>
								<checkbox value="1" :checked="formData.installationFee" />安装服务
							</label>
						</checkbox-group>
					</view>
					<view style="flex: 1;margin-right: 5px;">
						<uni-forms-item label="安装费" style="width: 90%;" name="installationFee">
							<uni-easyinput type="text" v-model="formData.installationFee" placeholder="输入安装费" />
						</uni-forms-item>
					</view>
				</view> -->
				<view style="display: flex;">
					<view style="margin-right: 30px;">
						<checkbox-group style="padding-top: 8px;" @change="setDrayage">
							<label>
								<checkbox :value="false" :checked="drayageFlag" />短驳服务
							</label>
						</checkbox-group>
					</view>
					<view style="flex: 1;margin-right: 5px;">
						<uni-forms-item label="短驳费" style="width: 90%;" name="drayage">
							<uni-easyinput type="text" :disabled="!drayageFlag" v-model="formData.drayage" placeholder="输入短驳费" />
						</uni-forms-item>
					</view>
				</view>
				<!-- <view style="display: flex;">
					<view style="margin-right: 30px;">
						<checkbox-group style="padding-top: 8px;" @change="carryFeeFlag=!carryFeeFlag">
							<label>
								<checkbox :value="false" :checked="carryFeeFlag" />搬运服务
							</label>
						</checkbox-group>
					</view>
					<view style="flex: 1;margin-right: 5px;">
						<uni-forms-item label="搬运费" style="width: 90%;" name="carryFee">
							<uni-easyinput type="text" :disabled="!carryFeeFlag" v-model="formData.carryFee" placeholder="输入搬运费" />
						</uni-forms-item>
					</view>
				</view> -->
				<!-- <view style="display: flex;">
					<view style="margin-right: 30px;">
						<checkbox-group style="padding-top: 8px;" @change="checkboxChange">
							<label>
								<checkbox value="1" :checked="formData.processFee" />加工服务
							</label>
						</checkbox-group>
					</view>
					<view style="flex: 1;margin-right: 5px;">
						<uni-forms-item label="加工费" style="width: 90%;" name="processFee">
							<uni-easyinput type="text" v-model="formData.processFee" placeholder="输入加工费" />
						</uni-forms-item>
					</view>
				</view> -->
				<view style="display: flex;flex-direction: column;">
					<view style="margin-right: 30px;">
						<checkbox-group style="padding-top: 8px;" @change="setOtherFee">
							<label>
								<checkbox :value="false" :checked="otherFeeFlag" />其他服务
							</label>
						</checkbox-group>
					</view>
					<view style="margin-top: 20px;display: flex;">
						<view style="flex: 1;">
							<uni-easyinput type="text" :disabled="!otherFeeFlag" v-model="formData.otherDesc" placeholder="输入其他服务" />
						</view>
						<view style="flex: 1;">
							<uni-forms-item label="其他费用" labelAlign="right">
								<uni-easyinput type="text" :disabled="!otherFeeFlag" v-model="formData.otherFee" placeholder="输入其他费用" />
							</uni-forms-item>
						</view>
					</view>
				</view>
			</uni-forms>
		</view>
		<view
			style="background-color: #ffffff;z-index: 2;height: 70px;width:100%;position: fixed;bottom: 0;display: flex;box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.1);">
			<view
				style="display: flex;align-items: center;width: 50%;height: 60px;justify-content: center;">
				<view @click="cancelSubmit()" hover-class="buttonHover"
					style="height: 35px;background-color: #ffffff;border:1px solid #bf5f09;color: #bf5f09;width: 100px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
					取消</view>
			</view>
			<view
				style="display: flex;align-items: center;width: 50%;height: 60px;justify-content: center;">
				<view @click="submit()" hover-class="buttonHover"
					style="height: 35px;background-color: #bf5f09;color: #ffffff;width: 100px;display: flex;justify-content: center;align-items: center;border-radius: 4px;">
					确定</view>
			</view>
		</view>
	</div>
</template>

<script>
	import {getDicts} from '@/api/system/dict.js'
	
	export default {
		data() {
			return {
				formData:{
					parcelInsuranceDesc:'',  //货值声明
					parcelInsuranceFee:'',   //保价费
					agentBusinessAccountType:'',//账号类型
					agentBusinessAccountName:'',//户名
					agentBusinessAccount:'',  //输入账号
					agentBusinessFee:'',  //贷款金额
					agentBusinessServiceFee:'', //服务费
					receiptType:'',   //回单类型
					receiptNum:'',  //回单数量
					receiptFee:'',  //回单费
					warehouseFee:'', //仓储费
					loadingFee:'',  //装货费
					unloadFee:'',  //卸货费
					drayage:'',    //短驳费
					carryFee:'',   //搬运费
					otherDesc:'',   //其他说明
					otherFee:'',    //其他费用
				},
				//下拉框->回单类型
				receiptType: [],
				receiptTypeArr:[],
				//下拉框->账号类型
				agentBusinessAccountType:[],
				//单选框选中状态
				agentBusinessFeeFlag:false,
				receiptFeeFlag:true,
				warehouseFeeFlag:false,
				loadingFeeFlag:false,
				unloadFeeFlag:false,
				drayageFlag:false,
				carryFeeFlag:false,
				otherFeeFlag:false,
			}
		},
		onLoad(e) {
			if(e.waybillValueAdd)
			{
				//设置顶部导航栏标题
				uni.setNavigationBarTitle({
					title: '编辑增值服务'
				})
				this.formData=JSON.parse(e.waybillValueAdd)
				//回单类型
				this.receiptTypeArr=this.formData.receiptType?(this.formData.receiptType.split(',')):[];
				//单选框选中状态
				this.agentBusinessFeeFlag=(this.formData.agentBusinessAccountType)||(this.formData.agentBusinessAccountName)||(this.formData.agentBusinessAccount)||Number(this.formData.agentBusinessFee)||Number((this.formData.agentBusinessServiceFee))?true:false;
				//this.receiptFeeFlag=(this.receiptTypeArr.length)||Number(this.formData.receiptNum)||Number(this.formData.receiptFee)?true:false;
				this.warehouseFeeFlag=Number(this.formData.warehouseFee)?true:false;
				this.loadingFeeFlag=Number(this.formData.loadingFee)?true:false;
				this.unloadFeeFlag=Number(this.formData.unloadFee)?true:false;
				this.drayageFlag=Number(this.formData.drayage)?true:false;
				this.carryFeeFlag=Number(this.formData.carryFee)?true:false;
				this.otherFeeFlag=Number(this.formData.otherFee)?true:false;
			}
		},
		created() {
			//获取回单类型下拉框
			getDicts('receipt_type').then(res=>{
				this.receiptType=res.data.map(item=>{
					return {
						value:item.dictValue,
						text:item.dictLabel
					}
				})
			})
			//获取账号类型下拉框
			getDicts('account_type').then(res=>{
				this.agentBusinessAccountType=res.data.map(item=>{
					return {
						value:item.dictValue,
						text:item.dictLabel
					}
				})
			})
		},
		methods: {
			//设置代收贷款
			setAgentBusinessFee(){
				this.agentBusinessFeeFlag=!this.agentBusinessFeeFlag
				//清空代收贷款信息
				this.$set(this.formData,'agentBusinessAccountType','')
				this.$set(this.formData,'agentBusinessAccount','')
				this.$set(this.formData,'agentBusinessAccountName','')
				this.$set(this.formData,'agentBusinessFee','')
				this.$set(this.formData,'agentBusinessServiceFee','')
			},
			//设置回单服务
			setReceiptFee(){
				this.receiptFeeFlag=!this.receiptFeeFlag
				//清空回单服务信息
				this.receiptTypeArr=[]
				this.$set(this.formData,'receiptNum','')
				this.$set(this.formData,'receiptFee','')
			},
			//设置仓储服务
			setWarehouseFee(){
				this.warehouseFeeFlag=!this.warehouseFeeFlag
				//清空仓储服务信息
				this.$set(this.formData,'warehouseFee','')
			},
			//设置装货服务
			setLoadingFee(){
				this.loadingFeeFlag=!this.loadingFeeFlag
				//清空装货服务信息
				this.$set(this.formData,'loadingFee','')
			},
			//设置卸货服务
			setUnloadFee(){
				this.unloadFeeFlag=!this.unloadFeeFlag
				//清空卸货服务信息
				this.$set(this.formData,'unloadFee','')
			},
			//设置短驳服务
			setDrayage(){
				this.drayageFlag=!this.drayageFlag
				//清空短驳服务信息
				this.$set(this.formData,'drayage','')
			},
			//设置其他服务
			setOtherFee(){
				this.otherFeeFlag=!this.otherFeeFlag
				//清空其他服务信息
				this.$set(this.formData,'otherDesc','')
				this.$set(this.formData,'otherFee','')
			},
			//取消保存
			cancelSubmit(){
				uni.navigateBack({
				    delta:1 // 可以不傳delta值，默認為1
				})
			},
			//保存增值服务信息
			submit(){
				//回单类型
				this.formData.receiptType=this.receiptTypeArr.join(',')||null
				let pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
				let nowPage = pages[pages.length - 1]; //当前页页面实例
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				prevPage.$vm.otherFun_waybillValueAdd(this.formData)// 給上一頁綁定方法otherFun,傳參formData
				uni.navigateBack({
				    delta:1 // 可以不傳delta值，默認為1
				})
			},
		}
	}
</script>

<style scoped>
	::v-deep .file-title{
	    font-size: 12px;
	    color: #333;
	}
</style>